<script setup lang="ts">
import {ref, onMounted} from 'vue'

// 统计数据
const statistics = ref([
  {
    title: '用户总数',
    value: 128,
    icon: 'User',
    color: '#40c9c6'
  },
  {
    title: '订单数量',
    value: 256,
    icon: 'Document',
    color: '#36a3f7'
  },
  {
    title: '总收入',
    value: '¥12,000',
    icon: 'Coin',
    color: '#f4516c'
  },
  {
    title: '访问量',
    value: '8,848',
    icon: 'View',
    color: '#34bfa3'
  }
])

// 最近活动数据
const activities = ref([
  {
    content: '用户张三完成了订单支付',
    timestamp: '2025-08-14 14:30',
    type: 'success'
  },
  {
    content: '用户李四提交了退款申请',
    timestamp: '2025-08-14 12:45',
    type: 'warning'
  },
  {
    content: '系统自动备份完成',
    timestamp: '2025-08-14 03:00',
    type: 'primary'
  },
  {
    content: '新用户王五注册成功',
    timestamp: '2025-08-14 09:15',
    type: 'info'
  }
])

// 待办事项
const todos = ref([
  {
    name: '完成项目需求分析',
    completed: true
  },
  {
    name: '设计用户界面原型',
    completed: true
  },
  {
    name: '实现核心功能模块',
    completed: false
  },
  {
    name: '进行系统测试',
    completed: false
  },
  {
    name: '部署上线',
    completed: false
  }
])

// 切换待办事项状态
const toggleTodo = (index: number) => {
  todos.value[index].completed = !todos.value[index].completed
}

onMounted(() => {
  // 空的 onMounted，为将来扩展保留
})

</script>

<template>
  <div class="main-box-margin">
    <!-- 统计卡片 -->
    <el-row :gutter="20" style="margin-bottom: 20px">
      <el-col :span="6" v-for="item in statistics" :key="item.title">
        <el-card class="statistic-card">
          <div class="statistic-content">
            <div class="statistic-icon" :style="{ backgroundColor: item.color }">
              <el-icon :size="24" color="#fff">
                <component :is="item.icon"/>
              </el-icon>
            </div>
            <div class="statistic-info">
              <div class="statistic-value">{{ item.value }}</div>
              <div class="statistic-title">{{ item.title }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表和活动区域 -->
    <el-row :gutter="20" style="margin-bottom: 20px">
      <!-- 图表区域 -->
      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>销售趋势</span>
            </div>
          </template>
          <div
            style="height: 300px; display: flex; align-items: center; justify-content: center; background-color: #f5f7fa;">
            <div style="text-align: center; color: #999;">
              <el-icon :size="48">
                <TrendCharts/>
              </el-icon>
              <p style="margin-top: 10px;">数据图表区域</p>
              <p style="font-size: 12px;">(ECharts 依赖加载失败，暂时无法显示图表)</p>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 最近活动 -->
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>最近活动</span>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.timestamp"
              :type="activity.type"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>

    <!-- 待办事项和通知 -->
    <el-row :gutter="20">
      <!-- 待办事项 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>待办事项</span>
            </div>
          </template>
          <el-table :data="todos" style="width: 100%">
            <el-table-column width="50">
              <template #default="scope">
                <el-checkbox
                  :model-value="scope.row.completed"
                  @change="toggleTodo(scope.$index)"/>
              </template>
            </el-table-column>
            <el-table-column label="任务">
              <template #default="scope">
                <span
                  :class="{ 'completed-todo': scope.row.completed }">
                  {{ scope.row.name }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <!-- 系统通知 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>系统通知</span>
            </div>
          </template>
          <el-alert
            title="系统维护通知"
            type="warning"
            description="系统将于今晚 2:00 - 4:00 进行维护，请提前做好相关准备。"
            show-icon
            style="margin-bottom: 15px;"
          />
          <el-alert
            title="新功能上线"
            type="success"
            description="用户管理模块新增权限控制功能，详情请查看更新日志。"
            show-icon
            style="margin-bottom: 15px;"
          />
          <el-alert
            title="安全提醒"
            type="info"
            description="请定期修改密码，确保账户安全。"
            show-icon
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.statistic-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.statistic-content {
  display: flex;
  align-items: center;
}

.statistic-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.statistic-info {
  flex: 1;
}

.statistic-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.statistic-title {
  color: #999;
  font-size: 14px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.completed-todo {
  text-decoration: line-through;
  color: #999;
}
</style>
